<style scoped>
  span{
    display: inline-block;
    min-width: 30px;
    height: 30px;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    padding: 0 5px;
    cursor: pointer;
    margin: 0 2px 5px;
  }
  span.active{
    background: #efefef;
  }
</style>
<template>
  <p>
    <span @click="prev" v-if="data.num>0">上一页</span>
    <span @click="prevMore" v-if="data.num>4">...</span>
    <span v-for="item in data.total" @click="choose(item-1)" v-if="item<(data.num+5)&&item>(data.num-4)&&(data.total!=1)" :class="{'active':data.num == (item - 1)}">{{item}}</span>
    <span @click="nextMore" v-if="(data.total - data.num)>4">...</span>
    <span @click="next" v-if="(data.total - data.num)>1">下一页</span>
  </p>
</template>

<script>

export default {
  components: {

  },

  props: [
    'data'
  ],

  data () {
    return {
    }
  },

  methods: {
    choose (ind) {
      this.$emit('choose',ind)
    },
    prev () {
      this.$emit('choose',(this.data.num-1))
    },
    prevMore () {
      this.$emit('choose',(this.data.num-10<0?0:this.data.num-10))
    },
    next () {
      this.$emit('choose',(this.data.num+1))
    },
    nextMore () {
      this.$emit('choose',(this.data.num+10>(this.data.total-1)?this.data.total-1:this.data.num+10))
    },
  }
}
</script>
